<template>
    <PageWrapper>
      <n-card :bordered="false" class="mb-3 proCard">
        <n-space align="center">
          <n-input-group style="width: 1280px">
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.nick_name"
                clearable
                placeholder="请输入用户昵称"
                @keyup.enter="reloadTable"
                />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.member_card"
                clearable
                placeholder="请输入会员号"
                @keyup.enter="reloadTable"
                />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-input
                style="width: 100%;margin-left: 20px;"
                v-model:value="params.mobile"
                clearable
                placeholder="请输入手机号"
                @keyup.enter="reloadTable"
                />
            </div>
            <div style="margin-left: 10px !important;display: flex;align-items: center;">
                <n-select v-model:value="params.is_delete" placeholder="请选择用户状态" style="width: 200px;margin-left: 20px;" :options="options" clearable />
            </div>
            <n-button type="primary" style="margin-left: 40px !important;" @click="reloadTable">
              <template #icon>
                <n-icon>
                  <SearchOutlined />
                </n-icon>
              </template>
              查询
            </n-button>
          </n-input-group>
        </n-space>
      </n-card>
      <n-card :bordered="false" class="proCard">
        <BasicTable
          :columns="columns"
          :request="loadDataTable"
          :row-key="(row) => row.id"
          ref="basicTableRef"
          :actionColumn="actionColumn"
          virtual-scroll
        >
        </BasicTable>
      </n-card>

      <CreateDrawer
        ref="createDrawerRef"
        :title="drawerTitle"
        :roleList="roleData"
        @change="reloadTable"
      />

      <!-- 退款 -->
      <n-modal v-model:show="tkshowModal">
        <n-card
          style="width: 1000px"
          title="退款"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
          <n-form
            :model="formParamstk"
            ref="formRef"
            label-placement="top"
            :label-width="100"
          >
            <n-form-item label="账户余额" path="money">
              <n-input
                placeholder=""
                v-model:value="formParamstk.money"
                disabled
              />
            </n-form-item>
            <n-form-item label="姓名" path="name">
              <n-input
                placeholder=""
                v-model:value="formParamstk.name"
              />
            </n-form-item>
            <n-form-item label="身份证号" path="id_card">
              <n-input
                placeholder=""
                v-model:value="formParamstk.id_card"
              />
            </n-form-item>
            <n-form-item label="退款金额" path="tkmoney">
              <n-input
                placeholder=""
                v-model:value="formParamstk.tkmoney"
              />
            </n-form-item>
          </n-form>
          <template #footer>
            <n-space style="margin: 0 auto;">
              <n-button type="primary" @click="tuikuan" :loading="subLoading" style="margin: 100px 0 50px; margin-left: 430px">提交</n-button>
            </n-space>
          </template>
        </n-card>
      </n-modal>

      <!-- 充值 -->
      <n-modal v-model:show="czshowModal">
        <n-card
          style="width: 1000px"
          title="充值"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
          <n-form
            :model="formParamscz"
            ref="formRef"
            label-placement="top"
            :label-width="100"
          >
            <n-form-item label="账户余额" path="money">
              <n-input
                placeholder=""
                v-model:value="formParamscz.money"
                disabled
              />
            </n-form-item>
            <n-form-item label="充值金额" path="czmoney">
              <n-input
                placeholder=""
                v-model:value="formParamscz.czmoney"
              />
            </n-form-item>
          </n-form>
          <template #footer>
            <n-space style="margin: 0 auto;">
              <n-button type="primary" @click="chongzhi" style="margin: 100px 0 50px; margin-left: 430px">提交</n-button>
            </n-space>
          </template>
        </n-card>
      </n-modal>

    </PageWrapper>
  </template>
  
  <script lang="ts" setup>
    import { h, reactive, ref } from 'vue';
    import { useMessage } from 'naive-ui';
    import { BasicColumn, BasicTable, TableAction } from '@/components/Table';
    import { SearchOutlined } from '@vicons/antd';
    import { columns } from './columns';
    import { list,Cashalipay,Recharge } from '@/api/users/index';
    import CreateDrawer from './CreateDrawer.vue';

    const message = useMessage();
    const basicTableRef = ref();
    const tableData = ref();
    const createDrawerRef = ref();
    const drawerTitle = ref();
    const roleData = ref([]);
    const tkshowModal = ref(false);
    const czshowModal = ref(false);
    const subLoading = ref(false);
    const defaultValueRef = () => ({
      users_id: '',
      money: '',
      tkmoney: '',
      name: '',
      id_card: '',
    });
    const formParamstk = ref(defaultValueRef());

    const defaultValueRefcz = () => ({
      users_id: '',
      money: '',
      czmoney: '',
    });
    const formParamscz = ref(defaultValueRefcz());
  
    const params = reactive({
      nick_name: '',
      mobile: '',
      is_delete: null,
      member_card: '',
      user_type: 1,
    });

    const options = ref([
      {
        label: "正常",
        value: 0,
      },
      {
        label: '禁用',
        value: 1
      }
    ])

    // 操作
    const actionColumn: BasicColumn = reactive({
      width: 210,
      title: '操作',
      key: 'action',
      fixed: 'right',
      align: 'center',
      render(record) {
        return h(TableAction as any, {
          actions: [
            {
              label: '编辑',
              onClick: handleEdit.bind(null, record),
            }, {
              label: '退款',
              onPositiveClick: handleTuikuan.bind(null, record),
              isConfirm: true,
              confirmContent: '您确定要退款吗？',
            }, {
              label: '充值',
              onClick: handleChongzhi.bind(null, record),
            },
          ],
        });
      },
    });
  
    //列表数据
    const loadDataTable = async (res) => {
      const result = await list({ ...params, ...res });
      tableData.value = result.list;
      return result;
    };

    // 编辑
    function handleEdit(record: Recordable) {
      drawerTitle.value = '编辑用户';
      const { openDrawer } = createDrawerRef.value;
      openDrawer(record.id);
    }

    // 退款
    function handleTuikuan(record: Recordable) {
      tkshowModal.value = true;

      formParamstk.value.tkmoney = '';
      formParamstk.value.money = record.balance;
      formParamstk.value.users_id = record.id;
      formParamstk.value.name = record.zsname;
      formParamstk.value.id_card = record.id_card;
    }

    function tuikuan(){
      let users_id = formParamstk.value.users_id;
      let tkmoney = formParamstk.value.tkmoney;
      let name = formParamstk.value.name;
      let id_card = formParamstk.value.id_card;
      subLoading.value = true;
      if(parseFloat(tkmoney) < 0.3){
        message.error('最小退款金额为0.3元');
        return;
      }if(parseFloat(tkmoney) >  parseFloat(formParamstk.value.money)){
        message.error('退款金额不能大于余额');
        return;
      }else{
        Cashalipay({ users_id:users_id,money:tkmoney,role_id:'',name:name,id_card:id_card }).then((res) => {
          if(res){
            subLoading.value = false;
            message.success('操作成功');
            tkshowModal.value = false;
            reloadTable();
          }else{
            message.error('操作失败,请检查信息');
            tkshowModal.value = false;
            reloadTable();
          }
        });
      }
    }

    // 退款
    function handleChongzhi(record: Recordable) {
      czshowModal.value = true;

      formParamscz.value.czmoney = '';
      formParamscz.value.money = record.balance;
      formParamscz.value.users_id = record.id;
    }

    function chongzhi(){
      let users_id = formParamscz.value.users_id;
      let czmoney = formParamscz.value.czmoney;

      if(formParamscz.value.czmoney == '' || formParamscz.value.czmoney == '0'){
        message.error('充值金额不能为空');
      }else{
        Recharge({ user_id: users_id,money: czmoney,zsmoney: '',leixing: 3, }).then(() => {
          message.success('操作成功');
          czshowModal.value = false;
          reloadTable();
        });
      }
    }


    //加载表格
    function reloadTable() {
      basicTableRef.value.reload();
    }
  
  </script>
  
<style lang="less" scoped>

</style>
  